 <!-- 
 @Author: LW  
 @Date: 2021-05-19 11:05:36  
 @function:附加信息
 -->
<template>
  <div>
    <el-form label-width="120px">
      <el-row>
        <el-form-item label="上传附件：">
          <el-button size="small" type="primary" @click="selAttach()">
            选择附件
          </el-button>
          <el-link
            type="primary"
            :underline="false"
            style="color: red; margin-left: 10px"
          >
            注：必须点击保存，附件操作才生效。
          </el-link>
        </el-form-item>
      </el-row>
   <el-table
          class="ptab"
          border
          stripe
          style="width: 100%;"
          height="400"
          :data="formInfo.fileInfo"
          size="mini"    
          >
            <el-table-column
              prop="name"
              label="文件名称"
              width="300"
            ></el-table-column>
            <el-table-column prop="size" label="文件大小"></el-table-column>
            <el-table-column
              prop="media_type"
              label="文件类型"
            ></el-table-column>
            <el-table-column prop="sort" label="文件排序"></el-table-column>
            <el-table-column
              fixed="right"
              label="操    作"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-download"
                  class="btnBlue"
                  @click="handleAttch('down', scope.row)"
                >
                  下载或预览
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-remove"
                  class="btnRed"
                  @click="handleAttch('remove', scope.row)"
                  v-if="disabled == false"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
    </el-form>

    <!-- 上传附件窗口 -->
    <el-dialog
      title="上传文件"
      :visible.sync="attachForm.formVisible"
      v-if="attachForm.formVisible"
      :width="attachForm.width"
      v-dialogDrag
      custom-class="role-mask"
      :close-on-click-modal="false"
      append-to-body
    >
      <UploadFile
        @callBack="mediaCallBack"
        v-bind:uploadInfo="uploadInfo"
      ></UploadFile> 
    </el-dialog> 
  </div>
</template>
<script>
import UploadFile from "@/components/common/uploadFile";
export default {
  props: ["formInfo"],
  components: {
     UploadFile,
  },
  data() {
    return {
      attachForm: {
        formVisible: false,
        width: "40%",
      },
      //上传文件信息
      uploadInfo: {
        servicePath: "",
        folderPath: "",
      },
    };
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化
    this.initData();
  },
  methods: {
    //初始化
    initData() {
      //初始化上传文件信息
      this.uploadInfo.servicePath =
        this.$store.getters.filesPath.service.mall_service;
      this.uploadInfo.folderPath =
        this.$store.getters.filesPath.folder.goods_picture;
    },
    //打开附件弹窗
    selAttach() {
      this.attachForm.formVisible = true;
    },
    //操作附件
    handleAttch(type, row) {
      if (type == "down") {
        //下载附件
        this.handleDownload(row);
      } else {
        //删除附件
        this.attchRemove(row);
      }
    },
    //下载
    handleDownload(row) {
      let fileUrl = this.$store.getters.fileServerURI + row.url;
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = fileUrl;
      link.setAttribute("download", row.name);
      link.setAttribute("target", "_Blank");
      document.body.appendChild(link);
      link.click();
      //释放URL对象所占资源
      window.URL.revokeObjectURL(fileUrl);
      //用完即删
      document.body.removeChild(link);
    },
    //删除
    attchRemove(row) {
      this.formInfo.fileInfo.some((item, i) => {
        if (item.url == row.url) {
          this.formInfo.fileInfo.splice(i, 1);
          return true;
        }
      });
    },
    //上传文件成功返回
    mediaCallBack(data) {
      this.formInfo.fileInfo = this.formInfo.fileInfo.concat(data);
      this.attachForm.formVisible = false;
    },
  },
};
</script>